﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
  <meta name="description" content=""/>
  <meta name="author" content=""/>
  <title>Rukada - Responsive Bootstrap4  Admin Dashboard Template</title>
  <!--favicon-->
  <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
  <!-- simplebar CSS-->
  <link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
  <!-- Bootstrap core CSS-->
  <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
  <!-- animate CSS-->
  <link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
  <!-- Icons CSS-->
  <link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
  <!-- Sidebar CSS-->
  <link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
  <!-- Custom Style-->
  <link href="assets/css/app-style.css" rel="stylesheet"/>
  
  
</head>

<body>

<!-- Start wrapper-->
 <div id="wrapper">
 
  <!--Start sidebar-wrapper-->
   <div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
     <div class="brand-logo">
      <a href="index.html">
       <img src="assets/images/logo-icon.png" class="logo-icon" alt="logo icon">
       <h5 class="logo-text">Rukada Admin</h5>
     </a>
   </div>
   <ul class="sidebar-menu do-nicescrol">
      <li class="sidebar-header">MAIN NAVIGATION</li>
      <li>
        <a href="index.html" class="waves-effect">
          <i class="zmdi zmdi-view-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="index.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v1</a></li>
          <li><a href="index2.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v2</a></li>
          <li><a href="index3.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v3</a></li>
          <li><a href="index4.html"><i class="zmdi zmdi-star-outline"></i> Dashboard v4</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-layers"></i>
          <span>UI Elements</span> <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
        <li><a href="ui-checkbox-radio.html"><i class="zmdi zmdi-star-outline"></i> Checkboxes & Radios</a></li>
        <li><a href="ui-nav-tabs.html"><i class="zmdi zmdi-star-outline"></i> Nav Tabs</a></li>
        <li><a href="ui-accordions.html"><i class="zmdi zmdi-star-outline"></i> Accordions</a></li>
        <li><a href="ui-modals.html"><i class="zmdi zmdi-star-outline"></i> Modals</a></li>
        <li><a href="ui-typography.html"><i class="zmdi zmdi-star-outline"></i> Typography</a></li>
        <li><a href="ui-list-groups.html"><i class="zmdi zmdi-star-outline"></i> List Groups</a></li>
        <li><a href="ui-bootstrap-elements.html"><i class="zmdi zmdi-star-outline"></i> BS Elements</a></li>
        <li><a href="ui-pagination.html"><i class="zmdi zmdi-star-outline"></i> Pagination</a></li>
        <li><a href="ui-alerts.html"><i class="zmdi zmdi-star-outline"></i> Alerts</a></li>
        <li><a href="ui-progressbars.html"><i class="zmdi zmdi-star-outline"></i> Progress Bars</a></li>
        <li><a href="ui-notification.html"><i class="zmdi zmdi-star-outline"></i> Notifications</a></li>
        <li><a href="ui-sweet-alert.html"><i class="zmdi zmdi-star-outline"></i> Sweet Alerts</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-gamepad"></i> <span>BS Cards</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="cards-image-cards.html"><i class="zmdi zmdi-star-outline"></i> Image Cards</a></li>
          <li><a href="cards-text-cards.html"><i class="zmdi zmdi-star-outline"></i> Text Cards</a></li>
          <li><a href="cards-profile-cards.html"><i class="zmdi zmdi-star-outline"></i> Profile Cards</a></li>
          <li><a href="cards-social-cards.html"><i class="zmdi zmdi-star-outline"></i> Social Cards</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-cloud-done"></i> <span>Buttons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="buttons-default-button.html"><i class="zmdi zmdi-star-outline"></i> Default Button</a></li>
          <li><a href="buttons-dropdown-buttons.html"><i class="zmdi zmdi-star-outline"></i> Dropdown Buttons</a></li>
          <li><a href="buttons-group-buttons.html"><i class="zmdi zmdi-star-outline"></i> Group Buttons</a></li>
          <li><a href="buttons-icon-buttons.html"><i class="zmdi zmdi-star-outline"></i> Icon Buttons</a></li>
          <li><a href="buttons-outline-buttons.html"><i class="zmdi zmdi-star-outline"></i> Outline Buttons</a></li>
          <li><a href="buttons-social-buttons.html"><i class="zmdi zmdi-star-outline"></i> Social Buttons</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-card-travel"></i>
          <span>Components</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="components-range-slider.html"><i class="zmdi zmdi-star-outline"></i> Range Sliders</a></li>
          <li><a href="components-image-carousel.html"><i class="zmdi zmdi-star-outline"></i> Image Carousels</a></li>
          <li><a href="components-grid-layouts.html"><i class="zmdi zmdi-star-outline"></i> Grid Layouts</a></li>
          <li><a href="components-tree-view-menu.html"><i class="zmdi zmdi-star-outline"></i> Tree View</a></li>
          <li><a href="components-nestable.html"><i class="zmdi zmdi-star-outline"></i> Nesteble</a></li>
          <li><a href="components-switcher-buttons.html"><i class="zmdi zmdi-star-outline"></i> Switcher Buttons</a></li>
          <li><a href="components-pricing-table.html"><i class="zmdi zmdi-star-outline"></i> Pricing Tables</a></li>
          <li><a href="components-vertical-timeline.html"><i class="zmdi zmdi-star-outline"></i> Vertical Timeline</a></li>
          <li><a href="components-horizontal-timeline.html"><i class="zmdi zmdi-star-outline"></i> Horizontal Timeline</a></li>
          <li><a href="components-fancy-lightbox.html"><i class="zmdi zmdi-star-outline"></i> Fancy Lightbox</a></li>          
          <li><a href="components-color-palette.html"><i class="zmdi zmdi-star-outline"></i> Color Palette</a></li>
        </ul>
      </li>
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-chart"></i> <span>Charts</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="charts-chartjs.html"><i class="zmdi zmdi-star-outline"></i> Chart JS</a></li>
          <li><a href="charts-morris.html"><i class="zmdi zmdi-star-outline"></i> Morris Charts</a></li>
          <li><a href="charts-sparkline.html"><i class="zmdi zmdi-star-outline"></i> Sparkline Charts</a></li>
          <li><a href="charts-peity.html"><i class="zmdi zmdi-star-outline"></i> Peity Charts</a></li>
          <li><a href="charts-c3-charts.html"><i class="zmdi zmdi-star-outline"></i> C3 Charts</a></li>
          <li><a href="charts-other.html"><i class="zmdi zmdi-star-outline"></i> Other Charts</a></li>
          <li><a href="charts-flot.html"><i class="zmdi zmdi-star-outline"></i> Flot Chart</a></li>
        </ul>
       </li>
      <li>
        <a href="calendar.html" class="waves-effect">
          <i class="zmdi zmdi-calendar-check"></i> <span>Calendar</span>
          <small class="badge float-right badge-info">New</small>
        </a>
      </li>
    
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-email"></i>
          <span>Mailbox</span>
           <small class="badge float-right badge-warning">12</small>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="mail-inbox.html"><i class="zmdi zmdi-star-outline"></i> Inbox</a></li>
          <li><a href="mail-compose.html"><i class="zmdi zmdi-star-outline"></i> Compose</a></li>
          <li><a href="mail-read.html"><i class="zmdi zmdi-star-outline"></i> Read Mail</a></li>
        </ul>
      </li>
      
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-format-list-bulleted"></i> <span>Forms</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="form-inputs.html"><i class="zmdi zmdi-star-outline"></i> Basic Inputs</a></li>
          <li><a href="form-input-group.html"><i class="zmdi zmdi-star-outline"></i> Input Groups</a></li>
          <li><a href="form-layouts.html"><i class="zmdi zmdi-star-outline"></i> Form Layouts</a></li>
          <li><a href="form-advanced.html"><i class="zmdi zmdi-star-outline"></i> Form Advanced</a></li>
          <li><a href="form-uploads.html"><i class="zmdi zmdi-star-outline"></i> Form Uploads</a></li>
          <li><a href="form-validation.html"><i class="zmdi zmdi-star-outline"></i> Form Validation</a></li>
          <li><a href="form-step-wizard.html"><i class="zmdi zmdi-star-outline"></i> Form Wizard</a></li>
          <li><a href="form-text-editor.html"><i class="zmdi zmdi-star-outline"></i> Form Editor</a></li>
        </ul>
      </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-lock"></i> <span>Authentication</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="authentication-signin.html"><i class="zmdi zmdi-star-outline"></i> SignIn 1</a></li>
          <li><a href="authentication-signup.html"><i class="zmdi zmdi-star-outline"></i> SignUp 1</a></li>
          <li><a href="authentication-lock-screen.html"><i class="zmdi zmdi-star-outline"></i> Lock Screen</a></li>
          <li><a href="authentication-reset-password.html"><i class="zmdi zmdi-star-outline"></i> Reset Password 1</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-invert-colors"></i> <span>UI Icons</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="icons-font-awesome.html"><i class="zmdi zmdi-star-outline"></i> Font Awesome</a></li>
          <li><a href="icons-material-designs.html"><i class="zmdi zmdi-star-outline"></i> Material Design</a></li>
          <li><a href="icons-themify.html"><i class="zmdi zmdi-star-outline"></i> Themify Icons</a></li>
          <li><a href="icons-simple-line-icons.html"><i class="zmdi zmdi-star-outline"></i> Line Icons</a></li>
          <li><a href="icons-flags.html"><i class="zmdi zmdi-star-outline"></i> Flag Icons</a></li>
        </ul>
      </li>
    
       <li>
        <a href="widgets.html" class="waves-effect">
          <i class="zmdi zmdi-widgets"></i> <span>Widgets</span>
          <small class="badge float-right badge-danger">10</small>
        </a>
      </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-grid"></i> <span>Tables</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="table-simple-tables.html"><i class="zmdi zmdi-star-outline"></i> Simple Tables</a></li>
          <li><a href="table-header-tables.html"><i class="zmdi zmdi-star-outline"></i> Header Tables</a></li>
          <li><a href="table-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Color Tables</a></li>
          <li><a href="table-striped-color-tables.html"><i class="zmdi zmdi-star-outline"></i> Striped Color Tables</a></li>
          <li><a href="table-data-tables.html"><i class="zmdi zmdi-star-outline"></i> Data Tables</a></li>
        </ul>
       </li>
     
     <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-map"></i> <span>Maps</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="maps-google.html"><i class="zmdi zmdi-star-outline"></i> Google Maps</a></li>
          <li><a href="maps-vector.html"><i class="zmdi zmdi-star-outline"></i> Vector Maps</a></li>
        </ul>
       </li>
     
      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="zmdi zmdi-collection-folder-image"></i> <span>Sample Pages</span>
          <i class="fa fa-angle-left float-right"></i>
        </a>
        <ul class="sidebar-submenu">
              <li><a href="pages-invoice.html"><i class="zmdi zmdi-star-outline"></i> Invoice</a></li>
          <li><a href="pages-user-profile.html"><i class="zmdi zmdi-star-outline"></i> User Profile</a></li>
          <li><a href="pages-blank-page.html"><i class="zmdi zmdi-star-outline"></i> Blank Page</a></li>
              <li><a href="pages-coming-soon.html"><i class="zmdi zmdi-star-outline"></i> Coming Soon</a></li>
          <li><a href="pages-403.html"><i class="zmdi zmdi-star-outline"></i> 403 Error</a></li>
          <li><a href="pages-404.html"><i class="zmdi zmdi-star-outline"></i> 404 Error</a></li>
          <li><a href="pages-500.html"><i class="zmdi zmdi-star-outline"></i> 500 Error</a></li>
        </ul>
       </li>

      <li>
        <a href="javaScript:void();" class="waves-effect">
          <i class="fa fa-share"></i> <span>Multilevel</span>
          <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="sidebar-submenu">
          <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
          <li>
            <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level One <i class="fa fa-angle-left pull-right"></i></a>
            <ul class="sidebar-submenu">
              <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two</a></li>
              <li>
                <a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Two <i class="fa fa-angle-left pull-right"></i></a>
                <ul class="sidebar-submenu">
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                  <li><a href="javaScript:void();"><i class="zmdi zmdi-star-outline"></i> Level Three</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-star-outline"></i> Level One</a></li>
        </ul>
      </li>
      <li class="sidebar-header">LABELS</li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-coffee text-danger"></i> <span>Important</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-chart-donut text-success"></i> <span>Warning</span></a></li>
      <li><a href="javaScript:void();" class="waves-effect"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a></li>
    </ul>
   
   </div>
   <!--End sidebar-wrapper-->

<!--Start topbar header-->
<header class="topbar-nav">
 <nav class="navbar navbar-expand fixed-top bg-white">
  <ul class="navbar-nav mr-auto align-items-center">
    <li class="nav-item">
      <a class="nav-link toggle-menu" href="javascript:void();">
       <i class="icon-menu menu-icon"></i>
     </a>
    </li>
    <li class="nav-item">
      <form class="search-bar">
        <input type="text" class="form-control" placeholder="Enter keywords">
         <a href="javascript:void();"><i class="icon-magnifier"></i></a>
      </form>
    </li>
  </ul>
     
  <ul class="navbar-nav align-items-center right-nav-link">
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
      <i class="fa fa-envelope-open-o"></i><span class="badge badge-secondary badge-up">12</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
         <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 12 new messages
          <span class="badge badge-secondary">12</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-5.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Jhon Deo</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Today, 4:10 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-6.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Sara Jen</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            <small>Yesterday, 8:30 AM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-7.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Dannish Josh</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
             <small>5/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-8.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-0 msg-title">Katrina Mccoy</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet.</p>
            <small>1/11/2018, 2:50 PM</small>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Messages</a></li>
        </ul>
        </div>
    </li>
    <li class="nav-item dropdown-lg">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
    <i class="fa fa-bell-o"></i><span class="badge badge-info badge-up">14</span></a>
      <div class="dropdown-menu dropdown-menu-right">
        <ul class="list-group list-group-flush">
          <li class="list-group-item d-flex justify-content-between align-items-center">
          You have 14 Notifications
          <span class="badge badge-info">14</span>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-accounts fa-2x mr-3 text-primary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Registered Users</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-coffee fa-2x mr-3 text-success"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Received Orders</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item">
          <a href="javaScript:void();">
           <div class="media">
             <i class="zmdi zmdi-notifications-active fa-2x mr-3 text-secondary"></i>
            <div class="media-body">
            <h6 class="mt-0 msg-title">New Updates</h6>
            <p class="msg-info">Lorem ipsum dolor sit amet...</p>
            </div>
          </div>
          </a>
          </li>
          <li class="list-group-item"><a href="javaScript:void();">See All Notifications</a></li>
        </ul>
      </div>
    </li>
    <li class="nav-item language">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="#"><i class="flag-icon flag-icon-gb"></i></a>
      <ul class="dropdown-menu dropdown-menu-right">
          <li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
          <li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
        </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
        <span class="user-profile"><img src="assets/images/avatars/avatar-13.png" class="img-circle" alt="user avatar"></span>
      </a>
      <ul class="dropdown-menu dropdown-menu-right">
       <li class="dropdown-item user-details">
        <a href="javaScript:void();">
           <div class="media">
             <div class="avatar"><img class="align-self-start mr-3" src="assets/images/avatars/avatar-13.png" alt="user avatar"></div>
            <div class="media-body">
            <h6 class="mt-2 user-title">Katrina Mccoy</h6>
            <p class="user-subtitle">mccoy@example.com</p>
            </div>
           </div>
          </a>
        </li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><i class="icon-power mr-2"></i> Logout</li>
      </ul>
    </li>
  </ul>
</nav>
</header>
<!--End topbar header-->

<div class="clearfix"></div>
	
  <div class="content-wrapper">
    <div class="container-fluid">
    <!-- Breadcrumb-->
     <div class="row pt-2 pb-2">
        <div class="col-sm-9">
		    <h4 class="page-title">Blank Page</h4>
		    <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javaScript:void();">Rukada</a></li>
            <li class="breadcrumb-item"><a href="javaScript:void();">Pages</a></li>
            <li class="breadcrumb-item active" aria-current="page">Blank Page</li>
         </ol>
	   </div>
	   <div class="col-sm-3">
       <div class="btn-group float-sm-right">
        <button type="button" class="btn btn-outline-primary waves-effect waves-light"><i class="fa fa-cog mr-1"></i> Setting</button>
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split waves-effect waves-light" data-toggle="dropdown">
        <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a href="javaScript:void();" class="dropdown-item">Action</a>
          <a href="javaScript:void();" class="dropdown-item">Another action</a>
          <a href="javaScript:void();" class="dropdown-item">Something else here</a>
          <div class="dropdown-divider"></div>
          <a href="javaScript:void();" class="dropdown-item">Separated link</a>
        </div>
      </div>
     </div>
     </div>
    <!-- End Breadcrumb-->


     <div class="demo-heading">Cards with image</div>

     <div class="row">
      <div class="col-lg-4">
         <div class="card">
            <img class="card-img-top" src="assets/images/gallery/1.jpg" alt="Card image cap">
            <div class="card-body">
               <h5 class="card-title text-primary">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-primary shadow-primary">Go somewhere</a>
            </div>
         </div>
      </div>
      <div class="col-lg-4">
         <div class="card">
            <img class="card-img-top" src="assets/images/gallery/2.jpg" alt="Card image cap">
            <div class="card-body">
               <h5 class="card-title text-success">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-success shadow-success">Go somewhere</a>
            </div>
         </div>
      </div>
      <div class="col-lg-4">
         <div class="card">
            <img class="card-img-top" src="assets/images/gallery/3.jpg" alt="Card image cap">
            <div class="card-body">
               <h5 class="card-title text-danger">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-danger shadow-danger">Go somewhere</a>
            </div>
         </div>
      </div>
   </div><!--End Row-->


   <div class="demo-heading">Float Cards with image</div>

     <div class="row pt-3">
      <div class="col-lg-4 pt-5">
         <div class="card">
            <div class="float-card">
                  <img class="rounded" src="assets/images/gallery/4.jpg" alt="Card image cap">
                </div>
            <div class="card-body float-card-content">
                 <h5 class="card-title text-primary">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-outline-primary">Go somewhere</a>
            </div>
         </div>
      </div>
      <div class="col-lg-4 pt-5">
         <div class="card">
            <div class="float-card">
                  <img class="rounded" src="assets/images/gallery/5.jpg" alt="Card image cap">
                </div>
            <div class="card-body float-card-content">
                 <h5 class="card-title text-primary">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-outline-primary">Go somewhere</a>
            </div>
         </div>
      </div>
      <div class="col-lg-4 pt-5">
         <div class="card">
            <div class="float-card">
                  <img class="rounded" src="assets/images/gallery/6.jpg" alt="Card image cap">
                </div>
            <div class="card-body float-card-content">
                 <h5 class="card-title text-primary">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-outline-primary">Go somewhere</a>
            </div>
         </div>
      </div>
   </div><!--End Row-->


   <div class="demo-heading">Cards with Carosuls</div>

    <div class="row">
      <div class="col-12 col-lg-6">
         <div class="card">
            <div id="carousel-1" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-1" data-slide-to="1"></li>
              <li data-target="#carousel-1" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/7.jpg" alt="Card image cap">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/8.jpg" alt="Card image cap">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/9.jpg" alt="Card image cap">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
            <div class="card-body">
               <h5 class="card-title text-primary">Card title here</h5>
                  <p class="card-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-primary shadow-primary">Go somewhere</a>
            </div>
         </div>
      </div>

      <div class="col-12 col-lg-6">
         <div class="card">
            <div id="carousel-2" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-2" data-slide-to="1"></li>
              <li data-target="#carousel-2" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/10.jpg" alt="Card image cap">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/11.jpg" alt="Card image cap">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/12.jpg" alt="Card image cap">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
            <div class="card-body">
               <h5 class="card-title text-primary">Card title here</h5>
                  <p class="card-text">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
               <hr>
               <a href="javascript:void();" class="btn btn-primary shadow-primary">Go somewhere</a>
            </div>
         </div>
      </div>
   
   </div><!--End Row-->


   <div class="demo-heading">Cards with list groups</div>

   <div class="row">
        <div class="col-lg-4">
         <div class="card">
          <img src="assets/images/gallery/13.jpg" class="card-img-top" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title text-dark">Card Sample title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
           <ul class="list-group list-group-flush list shadow-none">
            <li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio <span class="badge badge-dark badge-pill">14</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in <span class="badge badge-success badge-pill">2</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Vestibulum at eros <span class="badge badge-danger badge-pill">1</span></li>
          </ul>
          <div class="card-body">
            <a href="javascript:void();" class="card-link">Card link</a>
            <a href="javascript:void();" class="card-link">Another link</a>
          </div>
        </div>
        </div>
        <div class="col-lg-4">
         <div class="card">
          <img src="assets/images/gallery/14.jpg" class="card-img-top" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title text-dark">Card Sample title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
            <ul class="list-group list-group-flush list shadow-none">
            <li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio <span class="badge badge-dark badge-pill">14</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in <span class="badge badge-success badge-pill">2</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Vestibulum at eros <span class="badge badge-danger badge-pill">1</span></li>
          </ul>
          <div class="card-body">
            <a href="javascript:void();" class="card-link">Card link</a>
            <a href="javascript:void();" class="card-link">Another link</a>
          </div>
        </div>
        </div>
        <div class="col-lg-4">
         <div class="card">
          <div id="carousel-3" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#carousel-3" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-3" data-slide-to="1"></li>
              <li data-target="#carousel-3" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/15.jpg" alt="Card image cap">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/16.jpg" alt="Card image cap">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100 card-img-top" src="assets/images/gallery/17.jpg" alt="Card image cap">
              </div>
            </div>
            <a class="carousel-control-prev" href="#carousel-3" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carousel-3" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          <div class="card-body">
            <h5 class="card-title text-dark">Card Sample title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
           <ul class="list-group list-group-flush list shadow-none">
            <li class="list-group-item d-flex justify-content-between align-items-center">Cras justo odio <span class="badge badge-dark">14</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Dapibus ac facilisis in <span class="badge badge-success">2</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Vestibulum at eros <span class="badge badge-danger">1</span></li>
          </ul>
          <div class="card-body">
            <a href="javascript:void();" class="card-link">Card link</a>
            <a href="javascript:void();" class="card-link">Another link</a>
          </div>
        </div>
        </div>
      </div><!--End Row-->
      

      <div class="demo-heading">Cards With Image caps</div>

      <div class="row">
        <div class="col-12 col-lg-6">
          <div class="card mb-3">
             <img class="card-img-top" src="assets/images/gallery/18.jpg" alt="Card image cap">
               <div class="card-body">
                 <h5 class="card-title">Top Image Cap</h5>
                 <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                 <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
         </div>
        </div>

        <div class="col-12 col-lg-6">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Bottom Image Cap</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
            <img class="card-img-bottom" src="assets/images/gallery/19.jpg" alt="Card image cap">
            </div>
        </div>
      </div><!--End Row-->


   <div class="demo-heading">Image overlays</div>

   <div class="row">
      <div class="col-lg-6">
         <div class="card bg-dark text-white">
            <img class="card-img" src="assets/images/gallery/20.jpg" alt="Card image">
            <div class="card-img-overlay">
               <h5 class="card-title text-white">Card title</h5>
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <p class="card-text">Last updated 3 mins ago</p>
            </div>
         </div>
      </div>
      <div class="col-lg-6">
         <div class="card bg-dark text-white">
            <img class="card-img" src="assets/images/gallery/21.jpg" alt="Card image">
            <div class="card-img-overlay">
               <h5 class="card-title text-white">Card title</h5>
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
               <p class="card-text">Last updated 3 mins ago</p>
            </div>
         </div>
      </div>
   </div><!--End Row-->



   <div class="demo-heading">Some Extra Cards</div>

   <div class="row">
      <div class="col-lg-4">
         <div class="card">
            <img class="card-img-top" src="assets/images/gallery/22.jpg" alt="Card image cap">
            <div class="post-date"><span>15 Oct</span></div>
            <div class="card-body">
               <ul class="list-inline border-bottom pb-3">
                 <li class="list-inline-item"><i class="fa fa-thumbs-o-up"></i> Like</li>
                 <li class="list-inline-item"><i class="fa fa-commenting-o"></i> Comment</li>
                 <li class="list-inline-item"><i class="fa fa-share-alt"></i> Share</li>
               </ul>
               <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <a href="javascript:void();" class="btn btn-sm btn-outline-info float-right">Read more <i class="fa fa-angle-double-right"></i></a>
            </div>
         </div>
      </div>
      <div class="col-lg-4">
         <div class="card">
            <img class="card-img-top" src="assets/images/gallery/23.jpg" alt="Card image cap">
            <div class="post-date"><span>15 Oct</span></div>
            <div class="card-body">
               <ul class="list-inline border-bottom pb-3">
                 <li class="list-inline-item"><i class="fa fa-thumbs-o-up"></i> Like</li>
                 <li class="list-inline-item"><i class="fa fa-commenting-o"></i> Comment</li>
                 <li class="list-inline-item"><i class="fa fa-share-alt"></i> Share</li>
               </ul>
               <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <a href="javascript:void();" class="btn btn-sm btn-outline-info float-right">Read more <i class="fa fa-angle-double-right"></i></a>
            </div>
         </div>
      </div>
      <div class="col-lg-4">
         <div class="card">
            <img class="card-img-top" src="assets/images/gallery/24.jpg" alt="Card image cap">
            <div class="post-date"><span>15 Oct</span></div>
            <div class="card-body">
               <ul class="list-inline border-bottom pb-3">
                 <li class="list-inline-item"><i class="fa fa-thumbs-o-up"></i> Like</li>
                 <li class="list-inline-item"><i class="fa fa-commenting-o"></i> Comment</li>
                 <li class="list-inline-item"><i class="fa fa-share-alt"></i> Share</li>
               </ul>
               <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <a href="javascript:void();" class="btn btn-sm btn-outline-info float-right">Read more <i class="fa fa-angle-double-right"></i></a>
            </div>
         </div>
      </div>
   </div><!--End Row-->



  <div class="demo-heading">Cards Groups</div>

   <div class="row">
        <div class="col-lg-12">
          <div class="card-group">
            <div class="card border-right">
              <img class="card-img-top" src="assets/images/gallery/25.jpg" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <hr>
                <a href="javascript:void();" class="btn btn-inverse-success waves-effect waves-light">Action</a>
                </div>
            </div>
            <div class="card border-right">
              <img class="card-img-top" src="assets/images/gallery/26.jpg" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <hr>
                <a href="javascript:void();" class="btn btn-inverse-danger waves-effect waves-light">Action</a>
                </div>
            </div>
            <div class="card">
              <img class="card-img-top" src="assets/images/gallery/27.jpg" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <hr>
                <a href="javascript:void();" class="btn btn-inverse-info waves-effect waves-light">Action</a>
                </div>
            </div>
          </div>
        </div>
      </div><!--End Row-->


    <div class="demo-heading">Cards Deck</div>

      <div class="row">
        <div class="col-lg-12">
          <div class="card-deck">
            <div class="card">
              <img class="card-img-top" src="assets/images/gallery/28.jpg" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
              </div>
            </div>
            <div class="card">
              <img class="card-img-top" src="assets/images/gallery/29.jpg" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
              </div>
            </div>
            <div class="card">
              <img class="card-img-top" src="assets/images/gallery/30.jpg" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              </div>
              <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
              </div>
            </div>
          </div>
        </div>
      </div><!--End Row-->



    </div>
    <!-- End container-fluid-->
    
   </div><!--End content-wrapper-->
   <!--Start Back To Top Button-->
    <a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
    <!--End Back To Top Button-->
	
	<!--Start footer-->
	<footer class="footer">
      <div class="container">
        <div class="text-center">
          Copyright © 2018 <a href="http://www.17sucai.com/">Rukada</a> Admin
        </div>
      </div>
    </footer>
	<!--End footer-->
   
  </div><!--End wrapper-->


  <!-- Bootstrap core JavaScript-->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
	
  <!-- simplebar js -->
   <script src="assets/plugins/simplebar/js/simplebar.js"></script>
  <!-- waves effect js -->
  <script src="assets/js/waves.js"></script>
  <!-- sidebar-menu js -->
  <script src="assets/js/sidebar-menu.js"></script>
  <!-- Custom scripts -->
  <script src="assets/js/app-script.js"></script>
	
</body>
</html>
